<script>
import { defineComponent } from 'vue'
import { pageHandler } from '@/mixins/pageHandler'
import MonitorHeader from '@/components/MonitorHeader/MonitorHeader.vue'
import ScaleBox from '@/components/ScaleBox/ScaleBox.vue'
import YingYaBan from '@/components/controls/YingYaBan.vue'
import NetState from '@/components/controls/netState.vue'
import RuanYaBan from '@/components/controls/RuanYaBan.vue'
import GuangZiPai from '@/components/controls/GuangZiPai.vue'
import BiLeiQi from '@/components/controls/biLeiQi.vue'
import XianQuan from '@/components/controls/xianquan.vue'
import TerminalSvg from '@/components/controls/terminal-svg.vue'
import ConnectLine from '@/components/controls/connect-line.vue'
import RectSvg from '@/components/controls/rect-svg.vue'
import KongZhiBaShou from '@/components/controls/KongZhiBaShou.vue'
import RightClickmenuList from '@/components/rightClickmenuList/rightClickMenuList.vue'
import GuapaiDialog from '@/components/rightClickmenuList/guapaiDialog.vue'
import YaokongDialog from '@/components/rightClickmenuList/yaokongDialog.vue'

export default defineComponent({
  name: 'breakPage',
  components: {
    YaokongDialog,
    GuapaiDialog,
    RightClickmenuList,
    KongZhiBaShou,
    RectSvg,
    ConnectLine,
    TerminalSvg,
    XianQuan,
    BiLeiQi,
    GuangZiPai,
    RuanYaBan,
    NetState,
    YingYaBan,
    ScaleBox,
    MonitorHeader
  },
  mixins: [pageHandler],
  data() {
    return {
        netStateList:[],
        flexiblePlatenDataList:[]
    }
  },
  mounted() {},
  methods: {
      getColor(name) {
          const lowerName = name.toLowerCase();
         if (lowerName==='ia'||lowerName==='ua'){
             return 'yellow'
         }else if (lowerName==='ib'||lowerName==='ub'){
             return 'rgb(0,210,0)'
         }else if (lowerName==='ic'||lowerName==='uc'){
             return 'rgb(210,0,0)'
         }else{
             return 'rgb(128,0,128)'
         }
      },
    initData(e) {
      this.filterData(e)
    },
    filterData(data) {
      const typeMap = {
        "压板": 'hardPlatenDataList',
        "软压板": 'flexiblePlatenDataList',
        "光字牌": 'GZPDataList',
        "网络状态": 'netStateList'
      }

      for (const listName of Object.values(typeMap)) {
        this[listName] = []
      }
      for (const [key, value] of Object.entries(data)) {
        for (const [type, listName] of Object.entries(typeMap)) {
          const filtered = value.filter((item) => item.type === type)
          if (filtered.length > 0) {
            this[listName].push({ name: key, list: filtered })
          }
        }
      }

    }
  },
  created() {}
})
</script>

<template>
  <div
    @click="cancelLeftClickMenu"
    @contextmenu.stop="cancelLeftClickMenu"
    v-if="pageData"
  >
    <ScaleBox :width="2020">
      <MonitorHeader
        :title="
          /^220kv/i.test($route.query.ftName || '')
            ? $route.query.ftName
            : '220kV' + $route.query.ftName
        "
      >
        <template v-slot:btns>
          <button @click="routerToMainPage">主接线图</button>
          <button @click="clearAll($route.query.ftName)">画面清闪</button>
          <button @click="operationRecords">操作记录</button>
        </template>
      </MonitorHeader>
      <main>
        <div class="numbs">
            <div style="font-size: 25px">遥测</div>
            <div style="font-size: 25px">CT:1200/5</div>
            <div v-for="(item,index) in this.pageData['遥测']" :key="index" class="numItem">
                <div v-if="item.unit!==''" :style="{ color: getColor(item.state_desc) }">{{ `${item.state_desc}(${item.unit})` }}</div>
                <div v-else :style="{ color: getColor(item.state_desc) }">{{ item.state_desc }}</div>
                <div @contextmenu.prevent.stop="checkVal(item)" style="cursor: pointer">{{ `${Number(item.state_val).toFixed(2)}` }}</div>
            </div>
        </div>
        <div class="svgAndNet">
            <div class="title">接线图</div>
            <div class="svgWapper">
                <svg>
                    <g>
                        <line x1="60" y1="25" x2="400" y2="25" stroke="rgb(128,0,128)" stroke-width="4"></line>
                        <line x1="60" y1="65" x2="400" y2="65" stroke="rgb(128,0,128)" stroke-width="4"></line>
                        <text x="60" y="20" fill="rgb(128,0,128)" style="font-size: 18px">220kV Ⅰ母</text>
                        <text x="60" y="60" fill="rgb(128,0,128)"  style="font-size: 18px">220kV Ⅱ母</text>
                        <line x1="230" y1="25" x2="230" y2="90" stroke="rgb(128,0,128)" stroke-width="2"></line>
                        <line x1="280" y1="65" x2="280" y2="90" stroke="rgb(128,0,128)" stroke-width="2"></line>
                        <line x1="230" y1="132" x2="230" y2="290" stroke="rgb(128,0,128)" stroke-width="2"></line>
                        <line x1="230" y1="330" x2="230" y2="390" stroke="rgb(128,0,128)" stroke-width="2"></line>
                        <polyline points="230,260,290,260,290,290" stroke="rgb(128,0,128)" stroke-width="2" fill="none"></polyline>
                        <polyline points="230,360,170,360,170,330" stroke="rgb(128,0,128)" stroke-width="2" fill="none"></polyline>
                        <g transform="translate(0,12)">
                            <polyline points="180,120,180,150,280,150,280,120" stroke="rgb(128,0,128)" stroke-width="2" fill="none"></polyline>
                        </g>

                        <terminal-svg
                                :state="Number(pageData['dd'][0].state_val)"
                                :stateDesc="pageData['dd'][0].state_desc"
                                :name="'-'+pageData['dd'][0].state_desc.split('-')[1]"
                                :scale=0.8
                                :info="pageData['dd'][0]"
                                :translate-x="159"
                                :translate-y="78"
                                :text-translate-y="-5"
                                :rotate="0"
                                @itemRightClick="itemRightClick"
                        />
                        <connect-line
                                :state="Number(pageData['glg'][0].state_val)"
                                :stateDesc="pageData['glg'][0].state_desc"
                                :name="'-'+pageData['glg'][0].state_desc.split('-')[1]"
                                :scale=0.8
                                :info="pageData['glg'][0]"
                                :translate-x="197"
                                :translate-y="126"
                                :text-translate-y="5"
                                :text-translate-x="60"
                                :rotate="-90"
                                @itemRightClick="itemRightClick"
                        />
                        <connect-line
                                :state="Number(pageData['glg'][1].state_val)"
                                :stateDesc="pageData['glg'][1].state_desc"
                                :name="'-'+pageData['glg'][1].state_desc.split('-')[1]"
                                :scale=0.8
                                :info="pageData['glg'][1]"
                                :translate-x="247"
                                :translate-y="126"
                                :text-translate-y="5"
                                :text-translate-x="60"
                                :rotate="-90"
                                @itemRightClick="itemRightClick"
                        />
                        <rect-svg
                                :state="Number(pageData['dlq'][0].state_val)"
                                :stateDesc="pageData['dlq'][0].state_desc"
                                :rotate="90"
                                :translate-y="190"
                                :translate-x="270"
                                :text-translate-x="-2"
                                :text-translate-y="0"
                                :scale="1"
                                :info="pageData.dlq[0]"
                                @itemRightClick="itemRightClick"
                                :itemObj="{is_clear:pageData['dlq'][0].is_clear}"
                                :name="pageData['dlq'][0].state_desc"
                        ></rect-svg>
                        <connect-line
                                :state="Number(pageData['glg'][2].state_val)"
                                :stateDesc="pageData['glg'][2].state_desc"
                                :name="'-'+pageData['glg'][2].state_desc.split('-')[1]"
                                :scale=0.8
                                :info="pageData['glg'][2]"
                                :translate-x="197"
                                :translate-y="327"
                                :text-translate-y="5"
                                :text-translate-x="60"
                                :rotate="-90"
                                @itemRightClick="itemRightClick"
                        />
                        <terminal-svg
                                :state="Number(pageData['dd'][2].state_val)"
                                :stateDesc="pageData['dd'][2].state_desc"
                                :name="'-'+pageData['dd'][2].state_desc.split('-')[1]"
                                :scale=0.8
                                :info="pageData['dd'][2]"
                                :translate-x="149"
                                :translate-y="278"
                                :text-translate-y="-5"
                                :rotate="0"
                                @itemRightClick="itemRightClick"
                        />
                        <terminal-svg
                                :state="Number(pageData['dd'][1].state_val)"
                                :stateDesc="pageData['dd'][1].state_desc"
                                :name="'-'+pageData['dd'][1].state_desc.split('-')[1]"
                                :scale=0.8
                                :info="pageData['dd'][1]"
                                :translate-x="309"
                                :translate-y="344"
                                :text-translate-y="15"
                                :text-translate-x="70"
                                :rotate="180"
                                @itemRightClick="itemRightClick"
                        />
                    </g>
                </svg>
            </div>
            <div class="newState">
                <div class="address">
                    <div>地址：</div>
                    <div v-for="item in this.netStateList[0].list">{{item.state_desc.slice(0,2)}}</div>
                </div>
                <div class="state">
                    <div>通讯状态：</div>
                    <div  v-for="items in this.netStateList[0].list">
                        <net-state :info="items" :state="items.state_val"></net-state>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="title">保护测控压板状态</div>
            <div class="yabanList">
                <div v-for="(o, index) in flexiblePlatenDataList[0].list" :key="index" @click.prevent.stop="itemRightClick($event, 'ruanyaban', o.state_desc,Number(o.state_val), o.id,o.jg_name,o)">
                        <div class="yabanItem">
                            <RuanYaBan :state="Number(o.state_val)" :info="o"></RuanYaBan>
                        </div>

                </div>
            </div>
            <div class="bashou">  <div class="control-handle-wrapper" >
                <div class="control-handle-grid">
                    <div v-for="(item, index) in this.pageData['操作把手']" :key="index" class="control-handle-grid-item">
                        <template v-if="item.isEmpty"></template>
                        <template v-else>
                            <div class="svg-wrapper">
                                <svg>
                                    <g v-if="item.state_desc.includes('解锁')">
                                        <text x="20" y="15" fill="#FFFFFF" font-size="12px">联锁</text>
                                        <text x="60" y="60" fill="#FFFFFF" font-size="12px">解锁</text>
                                    </g>
                                    <g v-else>
                                        <text x="20" y="15" fill="#FFFFFF" font-size="12px">远方</text>
                                        <text x="60" y="60" fill="#FFFFFF" font-size="12px">就地</text>
                                    </g>
                                </svg>
                                <div class="polygon-icon">
                                    <div  class="cursor-pointer" style="cursor: pointer">
                                        <KongZhiBaShou style="margin-top: -10px" :info="item" :name="item.state_desc" :state="Number(item.state_val)"  @itemRightClick="itemRightClick" :deviceName="item.state_desc"  :jianGeMing="pageData['glg'][1].jg_name"></KongZhiBaShou>
                                    </div>
                                </div>
                            </div>
                            <div class="grid-item-name">{{item.state_desc}}</div>
                        </template>
                    </div>
                </div>
            </div></div>

        </div>
        <div>
            <div class="title">光字牌(硬节点)</div>
            <div class="gzpInner">
                <div v-for="item in pageData['光字牌']" class="gzpItem">
                    <GuangZiPai :info="item" :isClear="+item.is_clear" :jianGeMing="pageData.glg[1].jg_name" :name="item.state_desc" :state="Number(item.state_val)"></GuangZiPai>
                </div>
            </div>
        </div>
      </main>
    </ScaleBox>
    <rightClickmenuList
      v-if="rightMenuObj && showMenu"
      :right-menu-obj="rightMenuObj"
      @menuItemClick="menuItemClick"
    />
    <el-dialog
      custom-class="yaokongPersonDialog"
      :visible.sync="operatorPwdDialogVisible_0"
      width="22%"
      :close-on-click-modal="false"
    >
      <p slot="title" class="el-dialog__title">操作人</p>
      <div class="operatorPwd">
        <div class="operator">
          <label>请输入操作人</label>
          <el-select
            size="small"
            v-model="operatorPwdObj.username"
            style="width: 16rem"
          >
            <el-option
              v-for="(item, index) in userInfoJson.operatorList"
              :key="index"
              :label="item.username"
              :value="item.username"
            />
          </el-select>
        </div>
        <div class="pwd">
          <label>请输入密码</label>
          <el-input
            v-model="operatorPwdObj.pwd"
            size="small"
            type="password"
            @keydown.enter.native="operatorPwdSubmit_0"
          />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="operatorPwdSubmit_0">确 定</el-button>
        <el-button size="small" @click="operatorPwdDialogVisible_0 = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      custom-class="yaokongPersonDialog"
      :visible.sync="operatorPwdDialogVisible"
      width="22%"
      :close-on-click-modal="false"
    >
      <p slot="title" class="el-dialog__title">监护人</p>
      <div class="operatorPwd">
        <div class="operator">
          <label>请输入监护人</label>
          <el-select
            size="small"
            v-model="adminPwdObj.username"
            style="width: 16rem"
          >
            <el-option
              v-for="(item, index) in userInfoJson.adminList"
              :key="index"
              :label="item.username"
              :value="item.username"
            />
          </el-select>
        </div>
        <div class="pwd">
          <label>请输入监护员密码</label>
          <el-input
            v-model="adminPwdObj.pwd"
            size="small"
            type="password"
            @keydown.enter.native="operatorPwdSubmit"
          />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="operatorPwdSubmit">确 定</el-button>
        <el-button size="small" @click="operatorPwdDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      custom-class="switchPatrolDialog"
      :visible.sync="dialogVisible"
      :close-on-press-escape="true"
      :close-on-click-modal="true"
      :width="`40%`"
      :modal="false"
      @before-close="handleDialogClose"
    >
      <!-- 隔离刀 -->
      <template
        v-if="
          currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'gelidao'
        "
      >
        <!-- 遥控 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
          <p slot="title" class="el-dialog__title">遥控</p>
          <yaokongDialog
            :current-select-menu-item-obj="currentSelectMenuItemObj"
            :text="yaokongMsg"
          />
        </template>

        <!-- 开关清闪 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 2">
          <p slot="title" class="el-dialog__title">开关清闪</p>
        </template>

        <!-- 挂牌/摘牌 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 6">
          <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
          <guapaiDialog
            :current-select-menu-item-obj="currentSelectMenuItemObj"
          />
        </template>

        <span slot="footer" class="dialog-footer">
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value != 4
            "
            size="small"
            @click="dialogVisible = false"
            >取 消</el-button>

          <!-- 遥控 按钮 -->
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value == 1 &&
              !canyaoKong
            "
            size="small"
            @click="yaokongSelect"
            >遥控选择</el-button>
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value == 1 &&
              canyaoKong
            "
            size="small"
            @click="remoteControlSelect"
            >遥控执行</el-button>
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value == 1
            "
            size="small"
            type="primary"
            plain
            @click="dialogVisible = false"
            >关 闭</el-button>
          <!-- 挂牌/摘牌 按钮 -->
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value == 6
            "
            size="small"
            type="primary"
            @click="handleBrand"
            >确 定</el-button>
        </span>
      </template>

      <!-- 地刀 -->
      <template
        v-if="
          currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'didao'
        "
      >
        <!--          遥控-->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
          <p slot="title" class="el-dialog__title">遥控</p>
          <yaokongDialog
            :current-select-menu-item-obj="currentSelectMenuItemObj"
            :text="yaokongMsg"
          />
        </template>
        <!-- 开关清闪 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 0">
          <p slot="title" class="el-dialog__title">开关清闪</p>
          <span>暂无内容</span>
        </template>

        <!-- 全站清闪 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 4">
          <p slot="title" class="el-dialog__title">全站清闪</p>
          <span>暂无内容</span>
          <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
        </template>
        <!-- 挂牌/摘牌 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 5">
          <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
          <guapaiDialog
            :current-select-menu-item-obj="currentSelectMenuItemObj"
          />
        </template>
        <span slot="footer" class="dialog-footer">
          <!-- 遥控 按钮 -->
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value == 0
            "
            size="small"
            @click="dialogVisible = false"
            >取 消</el-button>
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value == 1 &&
              !canyaoKong
            "
            size="small"
            @click="yaokongSelect"
            >遥控选择</el-button>
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value == 1 &&
              canyaoKong
            "
            size="small"
            @click="remoteControlSelect"
            >遥控执行</el-button>
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value == 1
            "
            size="small"
            type="primary"
            plain
            @click="dialogVisible = false"
            >关 闭</el-button>

          <!-- 挂牌/摘牌 按钮 -->
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value == 5
            "
            size="small"
            type="primary"
            @click="handleBrand"
            >确 定</el-button>
        </span>
      </template>

      <!-- 断路器 -->
      <template
        v-if="
          currentSelectMenuItemObj &&
          currentSelectMenuItemObj.type == 'duanluqi'
        "
      >
        <!-- 遥控 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
          <p slot="title" class="el-dialog__title">遥控</p>
          <yaokongDialog
            :current-select-menu-item-obj="currentSelectMenuItemObj"
            :text="yaokongMsg"
          />
        </template>
        <!-- 开关清闪 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 2">
          <p slot="title" class="el-dialog__title">开关清闪</p>
          <span>确定要将{{
              currentSelectMenuItemObj.currentObj.name
            }}开关清闪吗？</span>
          <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
        </template>
        <!-- 全站清闪 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 3">
          <p slot="title" class="el-dialog__title">全站清闪</p>
          <span>确定要将全部设备进行清闪吗？</span>
          <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
        </template>

        <!-- 挂牌/摘牌 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 6">
          <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
          <guapaiDialog
            :current-select-menu-item-obj="currentSelectMenuItemObj"
          />
        </template>
        <span slot="footer" class="dialog-footer">
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value != 4
            "
            size="small"
            @click="dialogVisible = false"
            >取 消</el-button>
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value == 2
            "
            size="small"
            @click="clearFlesh"
            >确定</el-button>
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value == 3
            "
            size="small"
            @click="clearAll"
            >确定</el-button>
          <!-- 遥控 按钮 -->
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value == 1 &&
              !canyaoKong
            "
            size="small"
            @click="yaokongSelect"
            >遥控选择</el-button>
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value == 1 &&
              canyaoKong
            "
            size="small"
            @click="remoteControlSelect"
            >遥控执行</el-button>
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value == 1
            "
            size="small"
            type="primary"
            plain
            @click="dialogVisible = false"
            >关 闭</el-button>

          <!-- 挂牌/摘牌 按钮 -->
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value == 6
            "
            size="small"
            type="primary"
            @click="handleBrand"
            >确 定</el-button>
        </span>
      </template>

      <!-- 把手 -->
      <template
        v-if="
          currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'bashou'
        "
      >
        <!-- 操作 - 弹框 -->
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
          <p slot="title" class="el-dialog__title">操作</p>
          <span>暂无内容</span>
        </template>
        <span slot="footer" class="dialog-footer">
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value != 2
            "
            size="small"
            @click="dialogVisible = false"
            >取 消</el-button>
        </span>
      </template>

      <template
        v-if="
          currentSelectMenuItemObj &&
          currentSelectMenuItemObj.type == 'ruanyaban'
        "
      >
        <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
          <p slot="title" class="el-dialog__title">遥控</p>
          <yaokongDialog
            :current-select-menu-item-obj="currentSelectMenuItemObj"
            :text="yaokongMsg"
          />
        </template>
        <span slot="footer" class="dialog-footer">
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value == 2
            "
            size="small"
            @click="dialogVisible = false"
            >取 消</el-button>

          <!-- 遥控 按钮 -->
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value == 1 &&
              !canyaoKong
            "
            size="small"
            @click="yaokongSelect"
            >遥控选择</el-button>
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value == 1 &&
              canyaoKong
            "
            size="small"
            @click="remoteControlSelect"
            >遥控执行</el-button>
          <el-button
            v-if="
              currentSelectMenuItemObj &&
              currentSelectMenuItemObj.currentSelectItem.value == 1
            "
            size="small"
            type="primary"
            plain
            @click="dialogVisible = false"
            >关 闭</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      ref="operateRecordDialogRef"
      custom-class="operateRecordDialog"
      :modal="false"
      :close-on-click-modal="false"
      v-if="operationRecordsDialogVisible"
      :visible.sync="operationRecordsDialogVisible"
      v-dialogDrag:{dialogDrag}="true"
      width="35%"
    >
      <p slot="title" class="el-dialog__title">操作记录</p>
      <div class="messageAlarmList">
        <el-table :data="operationRecordsData" width="100%" height="250">
          <el-table-column
            prop="num"
            label="序号"
            width="85"
            header-align="center"
            align="center"
          >
            <template #default="{ row }">
              <span :class="{ 'is-highlight': !!row.isHighlight }">{{
                row.num
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="操作时间"
            width="160"
            header-align="center"
            align="center"
          >
            <template #default="{ row }">
              <span :class="{ 'is-highlight': !!row.isHighlight }">{{
                row.createTime
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="log_desc"
            label="操作描述"
            header-align="center"
          >
            <template #default="{ row }">
              <span :class="{ 'is-highlight': !!row.isHighlight }">{{
                row.log_desc
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
@import '@/assets/css/public';
main {
  height: calc(100% - 90px);
  border: 1px solid white;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  color: #ffffff;
  & > div {
    height: 92%;
    border: 1px solid white;
    &:nth-of-type(1) {
      width: 14%;
    }
    &:nth-of-type(2) {
      width: 22.5%;
    }
    &:nth-of-type(3) {
      width: 17%;
    }
    &:last-child {
      width: 37%;
    }
  }
}
.numbs{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 &>div{
   border: 1px solid white;
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   font-size: 18px;
 }
}
.numItem{
  display: flex;
  &>div{
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  & > div:first-child {
    border-right: 1px solid white;
  }
}
.title{
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid white;
  height: 3.7rem;
  font-size: 25px;
}
.svgWapper {
  height: 600px;
  padding: 10px 0;
  box-sizing: border-box;
  svg {
    width: 100%;
    height: 100%;
  }

}
.newState{
  border: 1px solid white;
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 100px;
  justify-content: space-between;
  padding: 1.2rem;
  box-sizing: border-box;
  font-size: 20px;
}
.address,.state{
  display: flex;
  justify-content: space-between;
  align-items: center;
  >div{
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.bashou{
  position: relative;
}
.control-handle-wrapper {
  padding: 10px;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  left: 105px;
  .control-handle-name {
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    border-bottom: none;
    padding: 4px;
  }
  .control-handle-grid {
    width: 100%;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
    .control-handle-grid-item {
      border: 1px solid #cccccc;
      height: 100px;
      width: 140px;
      text-align: center;
      padding: 0px;
      box-sizing: border-box;
      position: relative;
      .svg-wrapper {
        width: 100%;
        height: 70px;
        svg {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
        }
        .rotate {
          transform-origin: center;
        }
        .polygon-icon {
          position: absolute;
          left: 10px;
          top: 36px;
          width: 50px;
          height: 50px;
        }
      }
      .grid-item-name {
        margin-top: 10px;
        font-size: 12px;
      }
    }
  }
}
.gzpInner{
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  flex-wrap: wrap;
  height: 92%;
  padding-left: 1rem;
  .gzpItem{
    width: 48%;
    margin-top: .2rem;
  }
}
.yabanList{
  height: 500px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.yabanItem{
  display: flex;
  height: 50px;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 1rem 1rem 3rem;
  cursor: pointer;
}
</style>
